@import './variables.scss';

// Smooth transitions
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

// Enhanced module container
.module-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: $spacing-large;
  background: $main-bg;
  animation: fadeIn 0.3s ease;
  overflow: auto;
  position: relative;
}

// Improved module header with gradient
.module-header {
  margin-bottom: $spacing-large;
  padding-bottom: $spacing-medium;
  border-bottom: 2px solid $border-lighter;
  background: linear-gradient(135deg, $primary-lighter 0%, transparent 100%);
  padding: $spacing-large;
  border-radius: 12px;
  margin: 0 0 $spacing-large 0;
  position: relative;
  z-index: 10;
  
  h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: $text-primary;
    letter-spacing: -0.5px;
  }
  
  .module-description {
    margin-top: $spacing-small;
    color: $text-secondary;
    font-size: $font-size-base;
    line-height: 1.6;
  }
}

.module-content {
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
}

// Enhanced card design
.card {
  background: $card-bg;
  border-radius: 12px;
  border: 1px solid $border-light;
  padding: $spacing-large;
  margin-bottom: $spacing-medium;
  box-shadow: $box-shadow-card;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    box-shadow: $box-shadow-light;
    transform: translateY(-2px);
  }
  
  &.card-shadow {
    box-shadow: $box-shadow;
  }
}

.form-section {
  margin-bottom: $spacing-large;
  
  .section-title {
    font-size: $font-size-medium;
    color: $text-primary;
    margin-bottom: $spacing-base;
    padding-bottom: $spacing-small;
    border-bottom: 1px solid $border-lighter;
  }
}

.action-bar {
  display: flex;
  gap: $spacing-base;
  padding: $spacing-base;
  background: $border-extra-light;
  border-radius: 4px;
  margin-bottom: $spacing-medium;
  
  &.action-bar-right {
    justify-content: flex-end;
  }
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: $spacing-small;
  
  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    
    &.status-success {
      background: $success-color;
    }
    
    &.status-warning {
      background: $warning-color;
    }
    
    &.status-danger {
      background: $danger-color;
    }
    
    &.status-info {
      background: $info-color;
    }
  }
}

.code-editor {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  
  .CodeMirror {
    height: 100%;
    border: 1px solid $border-color;
    border-radius: 4px;
  }
}

.json-viewer {
  background: #f5f5f5;
  border: 1px solid $border-color;
  border-radius: 4px;
  padding: $spacing-base;
  font-family: monospace;
  font-size: 12px;
  overflow: auto;
  
  pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
}

// Improved empty state
.empty-state {
  text-align: center;
  padding: $spacing-extra-large * 2;
  color: $text-secondary;
  
  .empty-icon {
    font-size: 64px;
    margin-bottom: $spacing-large;
    color: $primary-light;
    opacity: 0.6;
    animation: pulse 2s infinite;
  }
  
  .empty-text {
    font-size: $font-size-medium;
    margin-bottom: $spacing-medium;
    font-weight: 500;
  }
  
  .empty-hint {
    font-size: $font-size-small;
    color: $text-placeholder;
  }
}

.toolbar {
  display: flex;
  align-items: center;
  gap: $spacing-base;
  padding: $spacing-base 0;
  border-bottom: 1px solid $border-lighter;
  margin-bottom: $spacing-medium;
  
  .toolbar-left {
    flex: 1;
    display: flex;
    gap: $spacing-base;
  }
  
  .toolbar-right {
    display: flex;
    gap: $spacing-base;
  }
}

.split-view {
  display: flex;
  height: 100%;
  gap: $spacing-medium;
  
  .split-left {
    flex: 0 0 300px;
    overflow: auto;
  }
  
  .split-right {
    flex: 1;
    overflow: auto;
  }
  
  &.split-horizontal {
    flex-direction: column;
    
    .split-top {
      flex: 1;
      overflow: auto;
    }
    
    .split-bottom {
      flex: 1;
      overflow: auto;
    }
  }
}

// Custom scrollbar design
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: $border-extra-light;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, $primary-color, $primary-dark);
  border-radius: 10px;
  border: 2px solid $border-extra-light;
  
  &:hover {
    background: linear-gradient(180deg, $primary-dark, $primary-color);
  }
}

// Animations
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

// Enhanced buttons
.el-button {
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all 0.3s ease;
  
  &--primary {
    background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
    border-color: $primary-dark;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
    }
  }
}

// Enhanced input fields
.el-input__inner,
.el-input-number .el-input__inner,
.el-textarea__inner {
  border-radius: 8px;
  padding: 10px 15px;
  font-size: $font-size-base;
  transition: all 0.3s ease;
  border: 1px solid $border-color;
  
  &:hover {
    border-color: $primary-light;
  }
  
  &:focus {
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
  }
}

// Fix number input specific styles
.el-input-number {
  &.el-input-number--small {
    width: auto;
    
    .el-input-number__decrease,
    .el-input-number__increase {
      width: 32px;
    }
    
    .el-input--small .el-input__inner {
      padding-left: 35px;
      padding-right: 35px;
    }
  }
  
  .el-input-number__decrease,
  .el-input-number__increase {
    background-color: $border-extra-light;
    transition: all 0.3s ease;
    width: 40px;
    
    &:hover {
      background-color: $primary-lighter;
      color: $primary-color;
      border-color: $primary-light;
    }
    
    &.is-disabled {
      background-color: $border-extra-light;
      color: $text-placeholder;
    }
  }
  
  .el-input-number__decrease {
    border-radius: 8px 0 0 8px;
    border-right: none;
  }
  
  .el-input-number__increase {
    border-radius: 0 8px 8px 0;
    border-left: none;
  }
}

// Enhanced cards for Element UI
.el-card {
  border-radius: 12px;
  border: none;
  box-shadow: $box-shadow-card;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: $box-shadow-light;
    transform: translateY(-2px);
  }
  
  .el-card__header {
    border-bottom: 1px solid $border-lighter;
    padding: 20px;
    font-weight: 600;
    background: $primary-lighter;
  }
  
  .el-card__body {
    padding: 20px;
  }
}

// Enhanced tabs
.el-tabs__item {
  font-weight: 500;
  transition: all 0.3s ease;
  
  &.is-active {
    color: $primary-color;
    font-weight: 600;
  }
  
  &:hover {
    color: $primary-dark;
  }
}

.el-tabs__active-bar {
  background: linear-gradient(90deg, $primary-color, $primary-dark);
  height: 3px;
  border-radius: 3px;
}

// Enhanced tags
.el-tag {
  border-radius: 6px;
  font-weight: 500;
  
  &--success {
    background: $success-light;
    color: $success-color;
    border-color: $success-color;
  }
  
  &--warning {
    background: $warning-light;
    color: $warning-color;
    border-color: $warning-color;
  }
  
  &--danger {
    background: $danger-light;
    color: $danger-color;
    border-color: $danger-color;
  }
  
  &--info {
    background: $info-light;
    color: $info-color;
    border-color: $info-color;
  }
}